<script>
import { useIndex } from "../stores/index.js";
import { computed, onBeforeMount, onUpdated } from "vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
// import { Toast } from 'node_modules/_vant@3.6.8@vant/lib/index.js';
import { Toast } from "vant";
export default {
  setup() {
    const router = useRouter();
    // 控制显示用户或是游客
    let tourist = ref(null);
    //有狐币
    let gold = ref(0);

    //更新前钩子
    onUpdated(() => {
      //挂载前钩子
      // onBeforeMount(() => {
      let userinfo = JSON.parse(localStorage.getItem("userinfo")); //赋值
      if (!userinfo) return;
      console.log(
        "++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++",
        userinfo
      );
      //如果是空的
      // if(userinfo){
      console.log(
        "---------------------------------------------------------------------------------",
        userinfo
      );
      if (userinfo.usermsg.type == "no") {
        //如果类型是no
        tourist.value = false; //就显示游客登录
        console.log("通过游客登录");
      } else {
        //如果类型是yes
        tourist.value = true; //就显示用户登录
        console.log("通过手机号登录");
      }
      let golds = JSON.parse(localStorage.getItem("allintegral"));

      if (golds) {
        gold.value = golds;
      } else {
        gold.value = 0;
      }

      foxFun();

      // }
      // });
    });
    let foxBean = ref(0);

    let foxFun = () => {
      let userinfo = JSON.parse(window.localStorage.getItem("userinfo"));
      if (userinfo && userinfo.foxBean) {
        foxBean.value = userinfo.foxBean;
        console.log(11);
      } else {
        foxBean.value = 0;
      }
    };

    const indexStore = useIndex();

    let changeSideLeftMeShow = () => {
      console.log("隐藏");
      indexStore.changeSideLeftMeShow(false);
    };

    let loginShow = ref(false);
    let setting = () => {
      loginShow.value = true;
    };

    let onConfirm = () => {
      window.localStorage.clear();
      router.push("/login");
      indexStore.changeSideLeftMeShow(false);
    };

    // 充值
    let recharge = () => {
      if (tourist.value == false) {
        Toast("游客登录不可充值");
        return;
      }
      router.push("/Recharge");
      indexStore.changeSideLeftMeShow(false);
    };
    let userinfo = localStorage.getItem("userinfo")
    //我的任务
    let mywork = () => {
      if(userinfo.usermsg.type=="no"){
        console.log("游客无法登录")
        return
      }
      router.push("/sign");
    };

    //作者专区
    let author = () => {
      router.push("/author");
    };

    let msgFlag = ref(true);

    let msgFun = () => {
      Toast("暂无最新消息");
      msgFlag.value = false;
    };

    onBeforeMount(() => {
      foxFun();
    });

    return {
      SideLeftMeShow: computed(() => indexStore.SideLeftMeShow),
      changeSideLeftMeShow,
      tourist,
      router,
      setting,
      gold,
      recharge, //充值
      foxBean, //狐豆
      loginShow,
      onConfirm,
      mywork,
      author,
      msgFun,
      msgFlag,
    };
  },
};
</script>


<template>
  <div :class="['SideLeftMe', SideLeftMeShow ? 'show' : 'hide']">
    <div class="left-main">
      <!-- 顶部名字和头像 -->

      <div class="opacity">
        <!-- 正经登录 -->
        <div class="top" v-if="tourist">
          <div class="msg">
            <div class="left">
              <div class="name">林凯琦</div>
              <div class="day">
                阅龄：<span>{{ 50 }}</span
                >天&nbsp;推荐票：<span>{{ 20 }}</span
                >张
              </div>
            </div>
            <div class="middle">
              <img src="../assets/img/头像.jpg" alt="" />
            </div>
            <div class="right">
              <!-- <svg t="1668942788520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2675" width="200" height="200"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2676" fill="#ffffff"></path></svg> -->
            </div>
          </div>
        </div>
        <!-- 游客登录 -->
        <div class="top" v-if="!tourist">
          <div class="msg">
            <div class="left">
              <div class="name">游客1254987</div>
              <div class="day">
                阅龄：<span>000</span>天&nbsp;推荐票：<span>0</span>张
              </div>
            </div>
            <div class="middle">
              <img src="../assets/img/noman.png" alt="" />
            </div>
            <div class="right">
              <!-- <svg t="1668942788520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2675" width="200" height="200"><path d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z" p-id="2676" fill="#ffffff"></path></svg> -->
            </div>
          </div>
        </div>
        <!-- 盖住 -->
        <div class="umbrela"></div>

        <!-- 我的账户 -->
        <div class="myacc">
          <!-- 啊上 -->
          <div class="shang">
            <div class="svg">
              <img src="../assets/signimg/第一.png" alt="" />
            </div>
            <p>我的账户</p>

            <div class="go">
              <svg
                t="1668943540809"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4765"
                width="200"
                height="200"
              >
                <path
                  d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
                  p-id="4766"
                  fill="#cdccd4"
                ></path>
              </svg>
            </div>
          </div>
          <!-- 下 -->
          <div class="xia">
            <div class="left">
              <div class="one">
                <div class="num">
                  {{ gold }}
                </div>
                <div class="name">有狐币</div>
              </div>
              <div class="two">
                <div class="num">
                  {{ foxBean }}
                </div>
                <div class="name">狐豆</div>
              </div>
            </div>
            <div class="right">
              <div class="pay" @click="recharge">充值</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 功能模块 -->
      <div class="cando">
        <!-- 我的任务 -->
        <div class="item no1" @click="mywork">
          <!-- 图片 -->
          <div class="svgs">
            <img src="../assets/signimg/钱包.png" alt="" />
          </div>
          <!-- 名称 -->
          <div class="name">我的任务</div>
          <div class="right">
            <div class="has">今日未签到</div>
            <div class="svg">
              <svg
                t="1668945337158"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6770"
                width="200"
                height="200"
              >
                <path
                  d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
                  p-id="6771"
                  fill="#666275"
                ></path>
              </svg>
            </div>
          </div>
        </div>
        <!-- 作者专区 -->
        <div class="item no2" @click="author">
          <!-- 图片 -->
          <div class="svgs">
            <img src="../assets/signimg/个人.png" alt="" />
          </div>
          <!-- 名称 -->
          <div class="name">作者专区</div>
          <div class="right">
            <div class="has"></div>
            <div class="svg">
              <svg
                t="1668945337158"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6770"
                width="200"
                height="200"
              >
                <path
                  d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
                  p-id="6771"
                  fill="#666275"
                ></path>
              </svg>
            </div>
          </div>
        </div>
        <!-- 我的消息 -->
        <div class="item no3">
          <!-- 图片 -->
          <div class="svgs">
            <img src="../assets/signimg/聊天.png" alt="" />
          </div>
          <!-- 名称 -->
          <div class="name" @click="msgFun">我的消息</div>
          <div class="right" v-show="msgFlag">
            <div class="pai">3</div>
            <div class="svg">
              <svg
                t="1668945337158"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6770"
                width="200"
                height="200"
              >
                <path
                  d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
                  p-id="6771"
                  fill="#666275"
                ></path>
              </svg>
            </div>
          </div>
        </div>
        <!-- 设置 -->
        <div class="item no4" @click="setting">
          <!-- 图片 -->
          <div class="svgs">
            <img src="../assets/signimg/设置.png" alt="" />
          </div>
          <!-- 名称 -->
          <div class="name">退出登录</div>
          <div class="right">
            <div class="has"></div>
            <div class="svg">
              <svg
                t="1668945337158"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6770"
                width="200"
                height="200"
              >
                <path
                  d="M312.888889 995.555556c-17.066667 0-28.444444-5.688889-39.822222-17.066667-22.755556-22.755556-17.066667-56.888889 5.688889-79.644445l364.088888-329.955555c11.377778-11.377778 17.066667-22.755556 17.066667-34.133333 0-11.377778-5.688889-22.755556-17.066667-34.133334L273.066667 187.733333c-22.755556-22.755556-28.444444-56.888889-5.688889-79.644444 22.755556-22.755556 56.888889-28.444444 79.644444-5.688889l364.088889 312.888889c34.133333 28.444444 56.888889 73.955556 56.888889 119.466667s-17.066667 85.333333-51.2 119.466666l-364.088889 329.955556c-11.377778 5.688889-28.444444 11.377778-39.822222 11.377778z"
                  p-id="6771"
                  fill="#666275"
                ></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right-close" @click="changeSideLeftMeShow"></div>

    <van-dialog
      v-model:show="loginShow"
      title="确定退出登录"
      @confirm="onConfirm"
      show-cancel-button
    >
    </van-dialog>
  </div>
</template>



<style lang="scss" scoped>
.left-main .opacity {
  overflow: hidden;
  width: 100%;
  background: url(../assets/img/mybcc.png) no-repeat center 132%;
  background-size: contain;
  position: relative;
  .umbrela {
    width: 100%;
    height: 2px;
    position: absolute;
    top: 160px;
    background-color: rgba($color: #fff, $alpha: 0.1);
  }
}
.left-main .cando {
  width: 100%;
  margin-top: 7px;
  .svgs {
    width: 20px;
    height: 20px;
    margin-left: 15px;
  }
  // .no1{
  //   svg{
  //     width: 17px;
  //     height: 17px;
  //     margin-left: 15px;
  //   }
  // }
  // .no2{
  //   svg{
  //     width: 20px;
  //     height: 20px;
  //     margin-left: 15px;
  //   }
  // }
  // .no3{
  //   svg{
  //     width: 19px;
  //     height: 19px;
  //     margin-left: 15px;
  //   }
  // }
  // .no4{
  //   svg{
  //     width: 18px;
  //     height: 18px;
  //     margin-left: 15px;
  //   }
  // }
  .item {
    width: 100%;
    height: 50px;
    border-top: 1px solid #dfdfdf;
    background-color: #fff;
    display: flex;
    align-items: center;
    svg {
      width: 17px;
      height: 17px;
      margin-left: 15px;
    }
    .name {
      flex: 1;
      font-size: 12px;
      margin-left: 15px;
      font-weight: 600;
      color: #0e0921;
    }
    .right {
      display: flex;
      height: 100%;
      align-items: center;
      .has {
        font-size: 10px;
        color: #6f6c7b;
      }
      .pai {
        width: 15px;
        height: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        color: #fff;
        background-color: #ff0325;
        border-radius: 50%;
      }
      .svg {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        svg {
          width: 8px;
          height: 8px;
          margin-left: 0px;
        }
      }
    }
  }
}
.left-main .myacc {
  margin-top: 0px;
  width: 100%;
  height: 94px;
  // background-color: #fff;
  background-color: rgba($color: #fff, $alpha: 0.9);
  .shang {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    .svg {
      width: 15px;
      height: 15px;
      margin-left: 15px;
      margin-right: 15px;
      img {
        width: 140%;
      }
    }
    p {
      flex: 1;
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      font-weight: 600;
    }
    .go {
      width: 44px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      svg {
        width: 8px;
        height: 8px;
      }
    }
  }
  .xia {
    width: 100%;
    height: 64px;
    display: flex;
    justify-content: space-between;
    .left {
      width: 184px;
      height: 64px;
      display: flex;
      justify-content: center;
      div {
        width: 64px;
        height: 64px;
        // background-color: #fff;
        .num {
          height: 34px;
          text-align: center;
          line-height: 34px;
          font-size: 20px;
          font-weight: 600;
          color: #0a0920;
        }
        .name {
          height: 10px;
          width: 100%;
          line-height: 10px;
          font-size: 10px;
          text-align: center;
          color: #74727d;
        }
      }
    }
    .right {
      width: 86px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      .pay {
        width: 50px;
        height: 20px;
        background-image: linear-gradient(to right top, #fd6c7d, #fe527f);
        font-size: 10px;
        line-height: 20px;
        text-align: center;
        border-radius: 10px;
        color: #fff;
      }
    }
  }
}
.left-main {
  width: 100%;
  height: 100%;
  background-color: #f7f7f9 !important;
}
.left-main .top {
  margin-bottom: 0px;
  width: 100%;
  height: 162px;
  // background-image: linear-gradient(to left top,#fbc2ce,#fa5d7f);
  background: url(../assets/img/mybcc.png) no-repeat;
  // background-color: #fff;
  background-color: rgba($color: #fff, $alpha: 0.9);
  background-size: 100%;
  display: flex;
  align-items: center;
  .msg {
    width: 100%;
    height: 64px;
    display: flex;
    .left {
      padding-top: 6px;
      box-sizing: border-box;
      padding-left: 15px;
      flex: 1;
      height: 64px;
      display: flex;
      flex-direction: column;
      color: #fff;
      .name {
        font-size: 20px;
        height: 32px;
        width: 100%;
        text-align: left;
        font-weight: 600;
        line-height: 32px;
      }
      .day {
        line-height: 28px;
        font-size: 10px;
        font-weight: 600;
        height: 28px;
        span {
          background-color: rgba($color: #000000, $alpha: 0.1);
          box-sizing: border-box;
          padding: 0 3px;
          border-radius: 2px;
        }
      }
    }
    .middle {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      box-sizing: border-box;
      border: 4px solid #fff;
      img {
        width: 100%;
      }
    }
    .right {
      width: 43px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      svg {
        width: 12px;
        height: 12px;
      }
    }
  }
}
.SideLeftMe {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 750px;
  min-width: 320px;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: 3000;
  transition: all 0.3s ease;
  z-index: 12;

  &.show {
    right: 0;
    left: 0;
  }

  &.hide {
    left: -100%;
    right: 100%;
  }

  .left-main {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: calc(100% - 80px);
    background-color: #eee;
    box-shadow: 1px 0 6px 2px rgba($color: #000000, $alpha: 0.2);
  }

  .right-close {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 80px;
  }
}
</style>